<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        #ss {
            height: 400px;
            width: 100%
        }
        p{
            color: #336699;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>自适应行高</p>
    <div id="ss"></div>
    <script type="text/javascript">
        // Title：首行缩进&自适应行高
        // Description：实现首行缩进并根据编辑内容自适应行高表
        // Tag:自定义单元格类型、首行缩进、自适应行高
        GC.Spread.Common.CultureManager.culture('zh-cn');
        
        var spreadNS = GC.Spread.Sheets;
        $(document).ready(function() {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            initSpread(spread);
        });
        // 声明用户自定义单元格类型，并支持序列化
        function EnterNewlineCellType() {
            GC.Spread.Sheets.CellTypes.Text.apply(this, arguments);
            this.typeName = "EnterNewlineCellType";
        }
        EnterNewlineCellType.prototype = new spreadNS.CellTypes.Text();
        
        // 重写paint方法
        EnterNewlineCellType.prototype.paint = function(ctx, value, x, y, w, h, style, options) {
        
            // 这里需要加一个判断，当value前端有空格时，换成\t
            var val = "";
            if (value && (typeof value === 'string') && value.constructor === String) {
                for (var i = 0; i < value.length; i++) {
                    if (value[i] === " ") {
                        val += "\t";
                    } else {
                        val += value[i];
                    }
                }
            }
            spreadNS.CellTypes.Text.prototype.paint.apply(this, [ctx, val, x, y, w, h, style, options]);
        };
        
        // 动态获取当前单元格编辑框的高度
        EnterNewlineCellType.prototype.getEditorValue = function(editorContext, context) {
            var editHeight = $(editorContext).height();
            var sheet = context.sheet;
            var row = context.row;
            var col = context.col;
            sheet.setTag(row, col, editHeight);
            return spreadNS.CellTypes.Text.prototype.getEditorValue.apply(this, arguments);
        };
        
        // 设置不响应SpreadJS的Enter事件
        EnterNewlineCellType.prototype.isReservedKey = function(e) {
            //这个方法目的是将enter事件注销，改为DOM自己的事件。
            return (e.keyCode === GC.Spread.Commands.Key.enter && !e.ctrlKey && !e.shiftKey && !e.altKey);
        };
        
        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.suspendPaint();
            sheet.setValue(1, 1, "这是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一段话");
            sheet.getCell(1, 1).wordWrap(true);
            
            // 给第2列设置自定义单元格
                sheet.setCellType(-1, 1, EnterNewlineCellType());
            sheet.setColumnWidth(1, 200);
                sheet.autoFitRow(1);
        
        // 设置ValueChanged事件，动态调整行高
                spread.bind(GC.Spread.Sheets.Events.ValueChanged, function (s, e) {
                    var newValue = e.newValue;
                    var oldValue = e.oldValue;
        
                    if(newValue !== oldValue){
                        var sheet = spread.getActiveSheet();
                        var row = e.row, col = e.col;
                        var span = sheet.getSpan(row, col);
                        // 处理含有合并单元格的情况
                        if(span){
                            var tag = sheet.getTag(row, col);
                            if(tag){
                                var editHeight = parseFloat(tag);
                                var rowCount = span.rowCount;
                                var heightAll = 0;
                                for(let i=row; i<row + rowCount; i++){
                                    heightAll += sheet.getRowHeight(i);
                                }
                                if(heightAll < editHeight){
                                    sheet.setRowHeight(row, editHeight - heightAll + sheet.getRowHeight(row));
                                }
                            }
                        }else{
                            sheet.autoFitRow(row);
                        }
                    }
                });
            sheet.resumePaint();
        };
    </script>
</body>

</html>